import React from 'react';
import {Table, Row, Col, Form, Input, Radio, DatePicker, Button} from 'antd';
import EditStatement from './EditStatement'
import OperatorConstant from "../../../utils/OperatorConstant";
const R = require('ramda');
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const dateFormat = 'YYYY-MM-DD';

export default Form.create({wrappedComponentRef: true})(class StatementList extends React.Component {
    constructor(props) {
        super(props);
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }


    onEdit = (record, type) => {
        if(OperatorConstant.view == type){
            this.props.dispatch({type: 'capital/getCurrentNodeDetail', payload: {id: record.id, code: "statement"}});
        }

        this.props.dispatch({type: 'settlement/getStatement', payload: {id: record.id}});
        if(this.editStatement)this.editStatement.handleOpen(type);
    };


    handleSearch = () => {
        let values = this.props.form.getFieldsValue();
        let newPage = this.props.settlement.page;
        newPage.page = 1;
        let time = values.time;

        this.props.dispatch({
            type: 'settlement/queryStatements',
            payload: {
                ...values,
                stObjId: this.props.cstid,
                beginTime:R.isNil(time)||R.isEmpty(time)?null:time[0].format(dateFormat),
                endTime:R.isNil(time)||R.isEmpty(time)?null:time[1].format(dateFormat),
                page: newPage,
            }
        });
    };


    columns = [
        {title: '结算单号', dataIndex: 'stateno', key: 'stateno'},
        {title: '结算金额(CNY)', dataIndex: 'transferamount', key: 'transferamount'},
        {title: '收款人', dataIndex: 'cc', key: 'cc',
            render: ()=>{
                return "待转译"
            }
        },
        {title: '开户行', dataIndex: 'accopenbank', key: 'accopenbank'},
        {title: '银行账号', dataIndex: 'accno', key: 'accno'},
        {title: '申请人', dataIndex: 'creatorName', key: 'creatorName',
            render: ()=>{
                return "待转译"
            }
        },
        {title: '提交时间', dataIndex: 'createtime', key: 'createtime'},
        {title: '操作',  key: 'key_oprator',
            render: (text, record, index) => {
                return (
                    <span>
                        <a href="#" onClick={this.onEdit.bind(this, record, "view")}>查看</a>
                    </span>
                );
            }
        }];

    render() {
        const { getFieldDecorator } = this.props.form;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 6 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
        };
        let values = this.props.form.getFieldsValue();
        let time=values.time;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.settlement.page.size,
            total: this.props.settlement.page.totalRow,
            showSizeChanger: true,
            current: this.props.settlement.page.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'settlement/queryStatements',
                    payload: {
                        ...values,
                        stObjId: this.props.cstid,
                        beginTime:R.isNil(time)||R.isEmpty(time)?null:time[0].format(dateFormat),
                        endTime:R.isNil(time)||R.isEmpty(time)?null:time[1].format(dateFormat),
                        page: newPage,
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.settlement.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'settlement/queryStatements',
                    payload: {
                        ...values,
                        stObjId: this.props.cstid,
                        beginTime:R.isNil(time)||R.isEmpty(time)?null:time[0].format(dateFormat),
                        endTime:R.isNil(time)||R.isEmpty(time)?null:time[1].format(dateFormat),
                        page: newPage,
                    }
                });
            }
        }

        return (

            <div>
                <Row>
                    <Col span={10}>
                        <FormItem  {...formItemLayout} label={'转账金额'}>
                            {getFieldDecorator('minamount', {})(
                                <Input placeholder="最小金额" style={{width: 130}}/>
                            )}
                        </FormItem>
                    </Col>

                    <Col span={4}>
                        <FormItem {...formItemLayout} label={'至'} style={{marginLeft: -110}}>
                            {getFieldDecorator('maxamount', {})(
                                <Input placeholder="最大金额" style={{width: 130}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={10}>
                        <FormItem {...formItemLayout} label={'结算单号'}>
                            {getFieldDecorator('stateno', {})(
                                <Input/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={10}>
                        <FormItem {...formItemLayout} label={'申请时间'}>
                            {getFieldDecorator('time', {})(
                                <RangePicker

                                    showTime={{format: 'YYYY-MM-DD'}}
                                    format="YYYY-MM-DD"
                                    placeholder={['开始时间', '结束时间']}
                                />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={10}>
                        <FormItem {...formItemLayout} label={'状态'}>
                            {getFieldDecorator('status', {
                                initialValue: "2"
                            })(
                                <RadioGroup style={{width: 800}} >
                                    <Radio value='2'>待审核</Radio>
                                    <Radio value='3'>审核失败</Radio>
                                    <Radio value='4'>待付款</Radio>
                                    <Radio value='5'>已付款</Radio>
                                    <Radio value='6'>付款失败</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={10} >
                        <Button type="primary" icon="search" style={{marginLeft: 185}}
                                onClick={this.handleSearch}>查询</Button>
                    </Col>
                </Row>

                <Table dataSource={this.props.settlement.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} scroll={{ x:true }}/>

                <EditStatement wrappedComponentRef={(inst) => this.editStatement = inst}
                               dispatch={this.props.dispatch}
                               dataSource={this.props.settlement.dataSource}
                               cstId={this.props.cstid}
                               capital = {this.props.capital}/>
            </div>
        )
    }
})

